<template>
  <view class="charts-area">
    <view class="charts-area-content">
      <qiun-data-charts
        type="area"
        :opts="opts"
        :canvas2d="true"
        :canvasId="canvasId"
        :chartData="chartData"
        :ontouch="true"
        :tooltipFormat="tooltipFormat"
      />
    </view>
    <slot />
  </view>
</template>

<script>
  var t = new Date().getTime()
  import { colors, _merge } from '../analysisUtil'
  import { calcNiceExtent } from '../calcNiceExtent'
  import { numFormatThousands } from '@/vehicle-ui/utils/tools.js'
  export default {
    data() {
      return {
        colors: colors,
        numFormatThousands: numFormatThousands,
        chartData: {},
        defaultOption: {
          color: colors,
          update: true,
          scrollPosition: 'left',
          padding: [10, 0, 10, 0],
          enableScroll: true,
          touchMoveLimit: 24,
          legend: { show: false },
          xAxis: {
            disableGrid: true,
            scrollShow: false,
            itemCount: 7,
            fontColor: '#86909C',
            fontSize: 12,
            rotateLabel: true,
            rotateAngle: 20,
          },
          yAxis: {
            gridType: 'dash',
            gridColor: '#DCDEE8',
            dashLength: 4,
            data: [
              {
                axisLine: false,
                fontColor: '#86909C',
                fontSize: 12,
                min: 0,
              },
            ],
          },
          extra: {
            area: {
              type: 'straight',
              opacity: 0.4,
              addLine: true,
              width: 1,
              gradient: true,
              activeType: 'hollow',
            },
          },
        },
      }
    },
    props: {
      canvasId: {
        type: String,
        default() {
          return 'uchart' + t
        },
      },
      tooltipFormat: {
        type: String,
        default: '',
      },
      uChartData: {
        type: Object,
        default() {
          return {}
        },
      },
      options: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    computed: {
      opts() {
        return _merge(this.defaultOption, this.options)
      },
    },
    watch: {
      uChartData: {
        handler(newVal) {
          this.chartData = newVal
          // 处理 yAxis 最大值
          this.handleYAxisMax()
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      handleYAxisMax() {
        let chartData = this.chartData
        if (chartData && chartData.series) {
          let series = chartData.series
          let max = 0
          if (Array.isArray(series) && series.length > 0) {
            series.forEach((ser) => {
              let data = ser.data
              if (Array.isArray(data) && data.length > 0) {
                data.forEach((item) => {
                  if (max < item) max = item
                })
              }
            })
            let yAxisOption = this.defaultOption.yAxis
            let extent = calcNiceExtent(5, [0, max])
            yAxisOption.data[0].min = extent[0]
            yAxisOption.data[0].max = extent[1]
          }
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .charts-area {
    .charts-area-content {
      width: 100%;
      height: 400rpx;
    }
  }
</style>
